<template>
  <div >
     <SelectCustomer ref="openSelectCustomer"  @customerSelected="customerSelected"></SelectCustomer>
     <SelectWarehouse ref="openSelectWarehouse"  @warehouseSelected="warehouseSelected"></SelectWarehouse>
    <!-- 整租操作增加整租 -->
    <el-dialog title="信息" :visible.sync="openWarehouseLeaseOperationAdd" width="800px" append-to-body :destroy-on-close="true" :before-close="beforeClose">
        <el-form ref="formParams" :model="formParams" :rules="rules" label-width="140px" :inline="true">
        <el-row>
            <el-col :span="12">
            <el-form-item label="客户" prop="khmc" :rules="rules.khmc">
                <el-input
                    v-model="formParams.khmc"
                    :disabled="true"
                    style="width:205px"
                >
                <el-button slot="append" @click="customerSelect">选择</el-button>
                </el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="仓库" prop="spckmc" :rules="rules.spckmc">
                <el-input
                    v-model="formParams.spckmc"
                    :disabled="true"
                    style="width:205px"
                >
                    <el-button slot="append" @click="warehouseSelect">选择</el-button>
                </el-input>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
            <el-form-item label="所在系统" prop="khlx">
                <el-input
                v-model="formParams.khlx"
                :disabled="true"
                />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="天数" prop="days">
                <el-input
                v-model="getDays"
                :disabled="true"
                />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
              <el-form-item label="租仓开始日期" prop="date1"  :rules="rules.date1">
                <el-date-picker
                  v-model="formParams.date1"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请输入租仓开始日期"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="租仓结束日期" prop="date2"  :rules="rules.date2">
                  <el-date-picker
                    v-model="formParams.date2"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="请输入租仓结束日期"
                    >
                  </el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
            <el-form-item label="使用面积（平方米）" prop="cwmj">
                <el-input
                v-model="formParams.cwmj"
                placeholder="请输入使用面积（平方米）"
                clearable
                type="number"
                @input="getCkje"
                />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="最大容量上限(吨)" prop="ckrl">
                <el-input
                v-model="formParams.ckrl"
                placeholder="请输入最大容量上限(吨)"
                clearable
                type="number"
                />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
            <el-form-item label="超仓单价(元/吨·天)" prop="ccdj">
                <el-input
                v-model="formParams.ccdj"
                placeholder="请输入超仓单价(元/吨·天)"
                clearable
                type="number"
                />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="整租单价(元/平方米)" prop="ckdj">
                <el-input
                v-model="formParams.ckdj"
                placeholder="请输入整租单价(元/平方米)"
                clearable
                type="number"
                @input="getCkje"
                />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
            <el-form-item label="整租金额(元)" prop="ckje">
                <el-input
                v-model="formParams.ckje"
                placeholder="请输入整租金额(元)"
                clearable
                type="number"
                />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="联系人" prop="dzzy7">
                <el-input
                v-model="formParams.dzzy7"
                placeholder="请输入联系人"
                clearable
                />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="联系电话" prop="dzzy8">
                <el-input
                v-model="formParams.dzzy8"
                placeholder="请输入联系电话"
                clearable
                />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="备注" prop="dzbz">
                <el-input
                v-model="formParams.dzbz"
                placeholder="请输入备注"
                clearable
                />
            </el-form-item>
            </el-col>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleAdd('formParams')" v-hasPermi="['zhcloud:ckzz:add']">录 入</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { warehouseLeaseOperationAdd } from "@/api/storage/warehouseLease/warehouseLeaseOperation"
import SelectWarehouse from "./selectWarehouse.vue"
import SelectCustomer from './selectLeaseCustomer.vue'
import { AMOUNT_DIGIT } from '@/utils/constant'
import { calculateDays } from '@/utils'


export default {
  name: "WarehouseLeaseOperationAdd",
  components:{SelectCustomer, SelectWarehouse},
  data() {
    return {
       // 表单校验
      rules: {
        khmc: [
          { required: true, message: "客户不能为空", trigger: "blur" },
        ],
        spckmc: [
          { required: true, message: "仓库不能为空", trigger: "blur" },
        ],
        date1: [
          { required: true, message: "租仓开始日期不能为空", trigger: "blur" }
        ],
        date2: [
          { required: true, message: "租仓结束日期不能为空", trigger: "blur" }
        ]
      },
      //弹窗状态
      openWarehouseLeaseOperationAdd: false,
      //表单数据
      formParams:{
        bckld: "",
        ccdj: "",
        ckdj: "",
        ckje: "",
        ckrl: "",
        cwmj: "",
        date1: "",
        date2: "",
        days: "",
        dzbz: "",
        dzid: "",
        dzzy7: "",
        dzzy8: "",
        khlx: "",
        khmc: "",
        khmcid: "",
        spckid: "",
        spckmc:""
      },
    };
  },
  computed: {
    getDays() {
      const date1 = this.formParams.date1
      const date2 = this.formParams.date2
      if(date1 && date2) {
        const days = calculateDays(date1, date2)
        if(days < 0) {
          this.$modal.msgError("请输入正确的日期!") 
          this.formParams.date1 = ""
          this.formParams.date2 = ""
          return ""
        } else {
          this.formParams.days = days + 1
          return days + 1
        }
      }
    }
  },
  watch:{
    'formParams.ckje': function(data) {
      if(data !== undefined) {
        if(data.indexOf('.')>0){
          data=data.slice(0,data.indexOf('.')+ (AMOUNT_DIGIT + 1))
        }
        this.formParams.ckje = data
      }
    },
    'formParams.ckdj': function(data) {
      if(data !== undefined) {
        if(data.indexOf('.')>0){
          data=data.slice(0,data.indexOf('.')+ (AMOUNT_DIGIT + 1))
        }
        this.formParams.ckdj = data
      }
    },
    'formParams.ccdj': function(data) {
      if(data !== undefined) {
        if(data.indexOf('.')>0){
          data=data.slice(0,data.indexOf('.')+ (AMOUNT_DIGIT + 1))
        }
        this.formParams.ccdj = data
      }
    },
  },
  methods: {
    /**录入 */
    handleAdd(formName) {
      this.$refs[formName].validate((valid, data) => {
        if(valid) {
          this.$modal.loading("数据正在录入中，请稍等...")
          warehouseLeaseOperationAdd(this.formParams).then(response => {
            this.$modal.closeLoading()
            this.$modal.msgSuccess('录入成功！')
            this.close()
            this.$emit('refresh', true)
          }).catch(()=> {
            this.$modal.closeLoading()
          })
        } else {
          for(let i in data) {
            const item = data[i]
            for(let j in item) {
              const message = item[j].message
              return this.$modal.msgError(message)
            }
          }
          return false
        }
      })
    },
    /**选择客户 */
    customerSelect() {
      this.$refs.openSelectCustomer.open()
    },
    /**选中客户 */
    customerSelected(data) {
      this.formParams.khmc = data.khmc
      this.formParams.khmcid = data.khid
      this.formParams.khlx = data.khlx
    },  
    /**选择库存 */
    warehouseSelect() {
      this.$refs.openSelectWarehouse.open()
    },
    /**选择库存 */
    warehouseSelected(data) {
      this.formParams.spckid = data.spckid
      this.formParams.spckmc = data.spckmc
    },
     getCkje() {
      const days = this.formParams.days
      const cwmj = this.formParams.cwmj
      const ckdj = this.formParams.ckdj
      let ckje = ""
      if(days && cwmj && ckdj) {
        ckje = (days*cwmj*ckdj).toFixed(AMOUNT_DIGIT)
        this.formParams.ckje = ckje
      }
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
    },
    /**关闭弹窗 */
    beforeClose(done) {
      this.close()
      done()
    },
    /**关闭窗口 */
    close() {
      this.changeWarehouseLeaseOperationAdd()
      this.reset()
    },
    /**改变窗口状态 */
    changeWarehouseLeaseOperationAdd() {
      this.openWarehouseLeaseOperationAdd = !this.openWarehouseLeaseOperationAdd;
    },

    /**打开弹窗 */
    open() {
      this.changeWarehouseLeaseOperationAdd()
    },
  }
};
</script>
